<template>
    <div>
        <table border="1px">
            <thead style="background-color:darkgray">
                <th>用户ID</th>
                <th>账号名称</th>
                <th>姓名</th>
                <th>性别</th>
                <th>联系方式</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
            </thead>
            <tbody v-for="item in tableData">
                <tr>
                    <td>{{ item.userId }}</td>
                    <td>{{ item.accountName }}</td>
                    <td>{{ item.userName }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ moment(item.created).format('YYYY-MM-DD mm:ss:HH') }}</td>
                    <td>
                        <span v-if="item.state=='1'" style="color: blue;">
                            {{ item.state == '1' ? "启用" : "禁用" }}
                        </span>
                        <span v-else style="color: red;">
                            {{ item.state == '1' ? "启用" : "禁用" }}
                        </span>
                    </td>
                    <td>
                        <el-button style="color: darkgray;" v-if="item.state == '0'"
                            @click="Update(item.userId)" >启用</el-button>
                        <el-button v-else style="color: blue;" @click="Update(item.userId)">禁用</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';

const tableData = ref([{
    "userId": 1,
    "accountName": "yiping",
    "userName": "依萍",
    "sex": "女",
    "phone": "16542102158",
    "created": "2025-08-14T00:00:00",
    "state": ''
}])

onMounted(() => {
    ShowData()
})

const ShowData = () => {
    axios.get('http://localhost:5298/api/Base/GetUser').then(res => {
        tableData.value = res.data.data
    })
}

const Update = (id: number) => {
    axios.post('http://localhost:5278/api/Base/UpdateState?userid=' + id).then(res => {
        if (confirm('确认启用/禁用吗？')) {
            if (res.data.data == 1) {
                alert('修改状态成功')
                ShowData()
            }
            else {
                alert('修改状态失败')
            }
        }
    })


}

</script>

<style scoped></style>